/** @jsx Array */

let renderer = (vdom, container) => {
  container.innerHTML = createElement(vdom)
}

let createElement = (vdom) => {
  let [type, props, ...children] = vdom
  if (typeof type === 'function') {
    if (type.prototype && type.prototype.render) {
      let Component = type
      let component = new Component({...props, children })
      if (component.beforeRender) {
        component.beforeRender()
      }
      return createElement(component.render())
    }
    let component = type
    return createElement(component({ ...props, children }))
  }

  let tag = `<${type}`
  let attrList = []

  for (let key in props) {
    attrList.push(`${key}="${props[key]}"`)
  }

  if (attrList.length) {
    tag += ` ${attrList.join(' ')}>`
  } else {
    tag += '>'
  }

  children.forEach(child => {
    let childNode = createChild(child)
    if (childNode) {
      tag += childNode
    }
  })

  tag += `</${type}>`

  return tag

}

let createChild = (child) => {
  if (Array.isArray(child)) {
    return createElement(child)
  } else if (child != null && typeof child != 'boolean') {
    return child
  }
}

let Test = ({ text }) => <div>stateless component {text}</div>
let StatefulTest = class {
  constructor(props) {
    this.props = props || {}
  }
  beforeRender() {
    console.log('before render of my custom life-cycle method')
  }
  render() {
    let { content='my content' } = this.props
    return (
      <div>class component {content}</div>
    )
  }
}

var App = () => (
  <div id="app">
    <h1 class="my-className">test virutal-dom</h1>
    <p class="my-class">some text</p>
    <div>render to string</div>
    <Test text="test text" />
    <StatefulTest />
  </div>
)

renderer(<App />, document.body)

console.log(App)

console.log(<App />)